<template>
  <div class="section footer">
    <div class="rightphone">
      <div class="rpitem">
        <a @click="ask" href="javascript:void(0)">
          <span class="el-icon-chat-dot-square"></span>
          <p>在线咨询</p>
        </a>
      </div>
      <div v-if="setting" class="rpitem">
        <a href="javascript:void(0)">
          <span class="el-icon-phone-outline"></span>
          <p>网报名热线</p>
          <div class="phone_num">
            <div><i class="el-icon-phone"></i>{{setting.contact.val}}</div>
            <b>全国统一学习专线 8:30-21:00</b>
          </div>
        </a>
      </div>
      <div class="rpitem">
        <a target="_blank" href="http://v.hzmba.com/default.htm">
          <span class="el-icon-s-management"></span>
          <p>网校试听</p>
        </a>
      </div>
    </div>
    <div class="secbox">
      <div class="fot-top">
        <ul class="fl">
          <li><a href="javascript:scroll(0,0)">返回顶部</a><i>|</i></li>
          <template v-for="item in friendLink">
            <li v-if="item.is_top!=0"><a :href="item.link" target="_blank">{{item.name}}</a><i>|</i></li>
          </template>
        </ul>
        <p class="fr">
          <nuxt-link to="/">青岛华章</nuxt-link>
        </p>
      </div>
      <div class="fot-bom">
        <div class="fot-bom-l fl">
          <dl style="margin-bottom: 35px;">
            <dd>市南校区 | 青岛市市南区金坛路17号教学楼222室（青岛服务外包实训基地）</dd>
            <dd>李沧校区 | 青岛市李沧区夏庄路146号</dd>
            <dd>黄岛校区 | 青岛市黄岛区峨眉山路396号光谷软件园13号楼3楼</dd>
          </dl>
          <dl>
            <dd>办公地址：青岛市市南区金坛路17号教学楼222室（青岛服务外包实训基地）</dd>
            <template v-if="setting">
              <dd>咨询电话：{{setting.contact.val}}</dd>
            </template>

            <dd>官方网站：http://www.qdhzmba.net</dd>
            <a style="font-size: 14px;color: #909092;line-height: 26px;" href="http://beian.miit.gov.cn/">鲁ICP备17045411号-2</a>
          </dl>
        </div>
        <div class="fot-bom-r fr">
          <div class="fot-logo"><img src="../assets/img/fot-logo.png"></div>
          <!-- <div class="fot-logo">
            <template v-if="setting">
              <img :src="setting.logo1.val">
              <img :src="setting.logo2.val">
            </template>
          </div> -->
          <ul class="fot-code">
            <li class="li1">
              <p>青岛华章咨询微信</p>
            </li>
            <li class="li2">
              <p>青岛华章订阅号</p>
            </li>
          </ul>

        </div>
      </div>
      <dl class="frien">
        <dt>友情链接：</dt>
        <template v-for="item in friendLink">
          <dd v-if="item.is_top!=1"><a :href="item.link" target="_blank">{{item.name}}</a></dd>
        </template>

      </dl>
    </div>
  </div>
</template>

<script>
    export default {
        name: "FooterBase",
        data() {
            return {
                topfriend: '',
                friendLink: '',
                tel: '',
                setting: '',
            }
        },
        created() {
            this.$apiGet("friendlinks").then(res => {
                this.friendLink = res.data;
            });
            this.$apiconfig().then(re => {
                //console.log(re)
                this.setting = re.setting;
            })
        },
        methods:{
            ask(){
                window.open('http://p.qiao.baidu.com/cps/chat?siteId=13067632&userId=24620165','_blank','width=800,height=600,menubar=no,toolbar=no,status=no,scrollbars=yes')
            },
        },

    }
</script>

<style scoped>
  .rightphone {
    display: flex;
    position: fixed;
    right: 0;
    top: 20vh;
    flex-direction: column;
    z-index: 9999;
  }

  .rpitem {
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF3F5A;
    border-bottom: 1px #fff solid;
    cursor: pointer;
    position: relative;
  }

  .rpitem:hover {
    background: #fff;
    color: #ff3f5a;
  }

  .rpitem:hover span, .rpitem:hover p {
    color: #ff3f5a;
  }
  .rpitem:hover .phone_num{
    display: flex;
  }
  .rpitem span {
    font-size: 30px;
    text-align: center;
    color: #fff;

  }

  .rpitem p {
    font-size: 14px;
    color: #fff;
  }

  .rpitem a {
    text-align: center;
  }

  .rpitem a:hover {
    text-decoration: none;
  }

  .rpitem .phone_num {
    right: 120px;
    position: absolute;
    width: 240px;
    background: #fff;
    top: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: none;
  }

  .phone_num div {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .phone_num div i{
    background: red;
    color: #FFF;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    margin-right: 5px;

  }
  .phone_num b {
    font-size: 14px;
  }
    @media (max-width: 800px) {
      .rightphone {
    display: flex;
    position: fixed;
    right: 0;
    width: 100%;
    top: inherit;
    bottom: 0px!important;
    display: flex;
    flex-direction: inherit;
}
.rpitem {
  width:calc(100%)!important;
}
.footer {
  padding-bottom:86px;
}
.rpitem .phone_num {
    right: -50%;
    /* margin-top: -50px; */
    position: absolute;
    width: 240px;
    padding: 10px;
    background: #fff;
    top: inherit;
    bottom: 85px;
}

    }

</style>
